<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    手机号:<input type="text" class="myinput" />
    <p class="exchange"></p>
  </body>

  <script>
    var ele = document.querySelector(".myinput");
    var pEle = document.querySelector(".exchange");
    //表单事件: 作用于表单上的一些事件;
    //1.表单的聚焦事件: focus
    ele.onfocus = function () {
      console.log("聚焦了");
    };

    //
    //2.表单的失去焦点 blur
    ele.onblur = function () {
      console.log("失焦了");
      var num = this.value;
      console.log(num);
      //   手机号正则
      var reg = /^1[3-9]\d{9}$/g;
      if (reg.test(num)) {
        pEle.innerHTML = "输入正确";
      } else {
        pEle.innerHTML = "输入错误";
      }
      document.body.appendChild(pEle);
    };

    //

    //3.输入的时候触发事件: input
    ele.oninput = function () {
      console.log("输入了内容");
      console.log(this.value);
    };

    //

    //4.当输入框发生改变的时候出发事件 : change
    ele.onchange = function () {
      console.log("触发了改变事件");
    };
  </script>
</html>
